<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="../node_modules/bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
[v-cloak]{display: none;}

</style>
</head>
<body>
<!--{"name":"A","isShow":false,"is":false,"list":[1,2,3,4,5,6],"listSelect":[]},-->
<!--A一级菜单名，isShow控制点击一级菜单时二级菜单隐藏显示，is控制二级菜单全选时一级菜单也被勾选，list二级菜单列表，listSelect将被选中的二级菜单内容加入到该数组中，，这是二维数据，当前项操作都要在当前item中进行-->
<div id="app" v-cloak>
	<ul v-for="item in lists"><!-- 循环lists，每个item是当前要操作的一组数据-->
		<input type="checkbox" v-model="item.is" @change="all(item)"><!-- 添加复选框绑定到is数据，绑定all事件传入当前这一组数据-->
		<span @click="item.isShow=!item.isShow"> {{item.name}}</span><!-- 输出name，绑定点击事件到isShow数据，每次点击都是取反改变-->
		<span> {{item.listSelect}}</span><!-- 输出当前组被勾选的二级菜单-->
		<li v-for="lbb in item.list" v-show="item.isShow"><!-- 循环当前组list二级菜单，每个lbb是数组中的一项，添加v-show指令，对应上面span的点击事件，实现点击隐藏或显示-->
			<input type="checkbox" v-model="item.listSelect" @change="isChange(item)" :value="lbb"> {{lbb}}<!-- 添加复选框绑定到listSelect数据，并且添加当前被点击项到listSelect，当前被点击项通过:value获得，因为value是通过被循环的属性得到的所以要加:冒号，绑定isChang事件传入当前这一组数据-->
		</li>
	</ul>
</div>

<script src="../node_modules/vue/dist/vue.js" type="text/javascript"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script type="text/javascript">
	let vm = new Vue({
		el:'#app',
		data:{  //放数据
			lists:[],
		},
		created(){ //初始化数据
			this.getData();
		},
		computed:{  //计算属性,当一个值是依赖别的值变化而改变
			
		},		
		methods:{  //放方法
			async getData(){
				this.lists = (await axios.get("./data/list.json")).data;
				//console.log(this.lists);
			},
			isChange(item){//
				item.is = item.list.length==item.listSelect.length ? true : false;
				//如果list的长度和listSelect的长度相等说明两个数组相等就是当前item的二级菜单都被勾选的意思，将true或false赋值给is属性，
				//console.log(item.list.length)
			},
			all(item){
				item.is ? item.listSelect=item.list : item.listSelect=[];
				//当改变is的值时，如果为true说明是全选就把list的值赋值给listSelect，如果为false说明不全选将listSelect数组清空
			}
			
		}
		
	})

</script>
</body>
</html>
